<template>
  <div class="unit-add p15">
    <el-form :model="form" class="demo-ruleForm" :rules="rules" ref="ruleForm">
      <div class="my-card-header mb15">
        <span>添加认证单位</span>
      </div>
      <el-form-item label="区域" :label-width="formLabelWidth" prop="fkProvince">
        <el-cascader
          :options="options"
          v-model="form.fkProvince"
          :show-all-levels="false"
          :props="{value:'id',label:'name',children:'childList',checkStrictly:true,emitPath:false }"
          ></el-cascader>
      </el-form-item>
      <el-form-item label="认证单位名称" :label-width="formLabelWidth" prop="folderName">
        <el-input v-model="form.folderName" auto-complete="off"></el-input>
      </el-form-item>
      <el-form-item label="详细地址" :label-width="formLabelWidth">
        <el-input v-model="form.address" auto-complete="off"></el-input>
      </el-form-item>
      <el-form-item label="坐标点" :label-width="formLabelWidth" prop="coordinatePoints">
        <el-input v-model="form.coordinatePoints" auto-complete="off"></el-input>
        <el-button class="ml15" icon="el-icon-right" circle type="primary" plain @click="toPicker"></el-button>
      </el-form-item>
      <el-form-item label="示范型单位" prop="isDemonstrat" :label-width="formLabelWidth">
        <el-radio-group v-model="form.isDemonstrat">
          <el-radio :label="true">是</el-radio>
          <el-radio :label="false" >否</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="是否管理单位" prop="highestDept" :label-width="formLabelWidth">
        <el-radio-group v-model="form.highestdept">
          <el-radio :label="true">是</el-radio>
          <el-radio :label="false" >否</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="服务基地" prop="state" :label-width="formLabelWidth">
        <el-radio-group v-model="form.state">
          <el-radio label="0">单位</el-radio>
          <el-radio label="1" >服务点</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="上传封面" :label-width="formLabelWidth">
        <el-upload
          :action="uploadUrl"
          list-type="picture-card"
          class="unit-uploader"
          with-credentials
          :show-file-list="false"
          :data="{
            attType:'pic',
            docunid:form.id
          }"
          :on-success="handleAvatarSuccess">
          <img v-if="imageUrl" :src="imageUrl" class="avatar">
          <i v-else class="el-icon-plus"></i>
        </el-upload>
      </el-form-item>
      <el-form-item label="视频文件" :label-width="formLabelWidth" class="video-box">
        <el-upload
          ref="videoUpload"
          :action="uploadUrl"
          accept="video/mp4"
          :data="{
              attType:'video',
              docunid:form.id
            }"
          with-credentials
          :limit="1"
          :show-file-list="true"
          :on-success="vedioUploadSuccess">
          <video v-if="videoUrl" :src="videoUrl" controls="controls"></video>
          <el-button v-else slot="trigger" size="small" type="primary">选取视频</el-button>
        </el-upload>
      </el-form-item>
      <el-form-item label="简介" prop="briefIntroduction" :label-width="formLabelWidth" >
        <el-input type="textarea" v-model="form.briefIntroduction" rows="3"></el-input>
      </el-form-item>
      <el-form-item label="教学点介绍" prop="introduce" :label-width="formLabelWidth" >
        <my-quill-editor :uploadUrl="uploadUrl" v-model="form.introduce"
            @richUploadSuccess="richUploadSuccess" ref="myQuill"></my-quill-editor>
        <!-- <quill-editor v-model="form.introduce" :options='editorOption'></quill-editor> -->
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer mb15">
      <el-button @click="cancel">取 消</el-button>
      <el-button type="primary" @click="save">确 定</el-button>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.dialog-footer{
  text-align: center;
}
.el-cascader{
  width: 100%;
}
.demo-ruleForm .el-cascader,.demo-ruleForm .el-input{
  max-width: 340px;
}
button.ml15{
  margin-left: 15px;
}
.avatar {
  width: 147px;
  height: 147px;
  display: block;
}
.video-box{
  width: 800px;
  video {
    width: 680px;
  }
}
</style>
<style>
.unit-uploader>.el-upload{
  overflow: hidden;
}
</style>
<script>
// import MyQuillEditor from '../../../components/lp-quill-editor'
import MyQuillEditor from '../../../components/tinymce-editor'
export default {
  components: {
    MyQuillEditor
  },
  data () {
    return {
      formLabelWidth: '120px',
      loading: false,
      uploadUrl: this.$store.state.uploadUrl,
      videoUrl: null,
      form: {
        id: null, // 由于有附件，所以id值取决于附件值
        folderName: '',
        address: '',
        fkProvince: '',
        coordinatePoints: '',
        isDemonstrat: false,
        highestdept: false,
        state: '0',
        introduce: '',
        briefIntroduction: ''
      },
      options: [],
      imageUrl: null,
      coverImage: null,
      editorOption: {
        placeholder: '请输入内容'
      },
      file: { // 记录附件的id
        pic: null,
        video: null
      },
      fileUpdate: { // 上传附件id
        addIds: []
      },
      // 表单验证
      rules: {
        fkProvince: [{ required: true, message: '请选择所属区域', trigger: 'blur' }],
        folderName: [{ required: true, message: '请输入认证单位', trigger: 'blur' }],
        coordinatePoints: [{ required: true, message: '请输入坐标点', trigger: 'blur' }]
      }
    }
  },
  mounted () {
    this.initSelectOption() // 获取下拉框数据
  },
  methods: {
    // 富文本图片上传成功
    richUploadSuccess (key) {
      // 将图片添加到新增附件id中
      this.fileUpdate.addIds.push(key)
    },
    // 获取下拉框数据
    initSelectOption () { // '/org/area/get-tree-select'
      this.$axios.get('/org/area/get-select-by-type/guest?type=' + 3)
      .then(res => {
        // 下拉框数据
        if (res.data.code === 200 && res.data.obj) {
          this.options = this.options.concat(res.data.obj)
        }
      })
    },
    // 视频添加
    vedioUploadSuccess (res, file, fileList) {
      this.videoUrl = URL.createObjectURL(file.raw)
      if (!this.form.id) {
        this.form.id = res.obj
      }
      this.file.video = res.other.sysAttachmentIds[0]
      this.$refs.videoUpload.clearFiles()
    },
    // 封面图片添加
    handleAvatarSuccess (res, file) {
      this.imageUrl = URL.createObjectURL(file.raw)
      // 设置id属性
      if (!this.form.id) {
        this.form.id = res.obj
      }
      this.form.coverImage = res.other.sysAttachmentIds[0] // 添加封面附件数据,后台会根据这个id转换
      this.file.pic = res.other.sysAttachmentIds[0]
    },
    // 获取坐标点
    toPicker () {
      window.open('https://lbs.amap.com/console/show/picker', '_blank')
    },
    cancel () {
      // 跳回列表页面
     this.$router.push('/cms/unit/unitList')
    },
    save () {
      this.$refs['ruleForm'].validate((valid) => {
        if (valid) {
          this.loading = true
          this.fileUpdate.addIds.push(this.file.pic)
          this.fileUpdate.addIds.push(this.file.video)
          this.$axios.all([this.$axios.post('/org/dept/add', this.form), this.$axios.put('/upload/update', this.fileUpdate)])
          .then(this.$axios.spread((res1, res2) => {
            this.loading = false
            if (res1.data.code === 200) {
              this.$message.success(res1.data.msg)
              this.$router.push('/cms/unit/unitList')
            } else {
              this.$message.error(res1.data.msg)
            }
          }))
        } else {
          return false
        }
      })
    }
  }
}
</script>
